<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>eXBinder - Example 2</title>
	<style type="text/css">
	
	html,body {
		background-color: #f2f2f2;
		font-family: sans-serif;
		color: #666;
	}
	body .outer {
		max-width: 1000px;
		padding: 30px;
        margin: 0 auto;
	}
	div.leaderboard, div.xml {
		padding: 20px;
		width: 49%;
		border: 1px solid #ddd;
		background-color: #ffffff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		min-height: 400px;
	}
	div.leaderboard {
		float: left;
	}
	div.leaderboard .player {
        margin-bottom: 10px;
    }
    div.leaderboard .score, div.leaderboard .name{
        font-weight: bold;
    }

	div.xml {
		float: right;
	}
	div.xml {
		font-family: monospace;
		color: #cc0000;
        font-size: 1.3em;
	}

	</style>
    <!--<link rel="stylesheet" href="styles/default.css">-->
    <link rel="stylesheet" href="default.css">
</head>
<body onload="init()">

    <div class="outer">

        <h1>Leaderboard</h1>

        <div class='leaderboard'>
            <div class='player'>
                Name: <span class='name'></span>, Score: <span class='score'></span> <button>+</button>
            </div>
        </div>
        
        <div id="xml" class="xml"></div>

    </div>
    
	<script type="text/javascript" src="../eXBinder.min.js"></script>
    <script src="highlight.pack.js"></script>
	
	<script type="text/javascript">

	var dtd = "<!DOCTYPE leaderboard [<!ELEMENT leaderboard (player+)><!ELEMENT player (name,score)><!ELEMENT name (#PCDATA)><!ELEMENT score (#PCDATA)>]>";
    var xml = "<leaderboard><player><name>Joaozinho</name><score>10</score></player><player><name>Mariazinha</name><score>15</score></player><player><name>Mariazinha</name><score>15</score></player><player><name>Arthur</name><score>25</score></player><player><name>Hugo</name><score>40</score></player><player><name>Pedro</name><score>5</score></player><player><name>Carla</name><score>105</score></player><player><name>Luís</name><score>89</score></player><player><name>Lucas</name><score>35</score></player><player><name>Letícia</name><score>35</score></player><player><name>Matheus</name><score>60</score></player><player><name>Gabriel</name><score>75</score></player><player><name>Sabrina</name><score>1</score></player></leaderboard>";
	var binder;

	function init() {
	    binder = $('.leaderboard').eXBinder({dtd: dtd, xml: xml});
        updateXML();
        
        $("button").each(function() {
        
            var btn = $(this);
            var score = $(this).prev('.score');
            
            btn.click(function() {
                score.text(parseInt(score.text(),10) + 1);
                score.trigger('change');
                updateXML();
            });
        
        });
        
	}
    
    
    function htmlEntities(str) {
        return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
    
    function updateXML() {
        $("#xml").html(htmlEntities(binder.getXML()));
    }

	</script>

</body>
</html>
